// base color
$blue: #324157;
$light-blue: #333c46;
$red: #C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow: #FEC171;
$panGreen: #30B08F;

// 默认主题变量
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$menuBg: #304156;
$menuHover: #263445;

// 浅色主题theme-light
$menuLightBg: #ffffff;
$menuLightHover: #f0f1f5;
$menuLightText: #303133;
$menuLightActiveText: #409EFF;

// 基础变量
$base-sidebar-width: 200px;
$sideBarWidth: 200px;

// 菜单暗色变量
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #304156;
$base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover: #001528;

// 组件变量
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  menuLightBg: $menuLightBg;
  menuLightHover: $menuLightHover;
  menuLightText: $menuLightText;
  menuLightActiveText: $menuLightActiveText;
  sideBarWidth: $sideBarWidth;
  // 导出基础颜色
  blue: $blue;
  lightBlue: $light-blue;
  red: $red;
  pink: $pink;
  green: $green;
  tiffany: $tiffany;
  yellow: $yellow;
  panGreen: $panGreen;
  // 导出组件颜色
  colorPrimary: $--color-primary;
  colorSuccess: $--color-success;
  colorWarning: $--color-warning;
  colorDanger: $--color-danger;
  colorInfo: $--color-info;
}

// CSS变量定义
:root {
  /* 亮色模式变量 */
  --sidebar-bg: #{$menuBg};
  --sidebar-text: #{$menuText};
  --menu-hover: #{$menuHover};

  --navbar-bg: #ffffff;
  --navbar-text: #303133;

  --main-bg-color: #ffffff;

  --menu-dark-bg: hsl(222.34deg 10.43% 12.27%);

  /* ------------------------------
 * Colors - Theme Base (主题基础色)
 * ------------------------------ */
  --theme-primary: var(--el-color-primary); /* 默认主色 */
  --theme-primary-light: var(--el-color-primary-light-9); /* 主色亮 */

  /* ------------------------------
 * Gray Scale (灰阶系统颜色)
 * ------------------------------ */
  --gray-100: #f9f9f9;
  --gray-100-rgb: 249, 249, 249;
  --gray-200: #f1f1f4;
  --gray-200-rgb: 241, 241, 244;
  --gray-300: #dbdfe9;
  --gray-300-rgb: 219, 223, 233;
  --gray-400: #c4cada;
  --gray-400-rgb: 196, 202, 218;
  --gray-500: #99a1b7;
  --gray-500-rgb: 153, 161, 183;
  --gray-600: #78829d;
  --gray-600-rgb: 120, 130, 157;
  --gray-700: #4b5675;
  --gray-700-rgb: 75, 86, 117;
  --gray-800: #252f4a;
  --gray-800-rgb: 37, 47, 74;
  --gray-900: #071437;
  --gray-900-rgb: 7, 20, 55;
}

// 暗黑模式变量
html.dark {
  /* 默认通用 */
  --main-bg-color: #161618;
  /* 侧边栏 */
  --sidebar-bg: #141414;
  --sidebar-text: #ffffff;
  --menu-hover: #2d2d2d;
  --menu-active-text: #{$menuActiveText};

  /* 顶部导航栏 */
  --navbar-bg: #141414;
  --navbar-text: #ffffff;
  --navbar-hover: #141414;

  /* 标签栏 */
  --tags-bg: #141414;
  --tags-item-bg: #1d1e1f;
  --tags-item-border: #303030;
  --tags-item-text: #d0d0d0;
  --tags-item-hover: #2d2d2d;
  --tags-close-hover: #64666a;

  /* blockquote 暗黑模式变量 */
  --blockquote-bg: #1d1e1f;
  --blockquote-border: #303030;
  --blockquote-text: #d0d0d0;

  /* Cron 时间表达式 模式变量 */
  --cron-border: #303030;

  /* Gray Scale */
  --gray-100: #1b1c22;
  --gray-100-rgb: 27, 28, 34;
  --gray-200: #26272f;
  --gray-200-rgb: 38, 39, 47;
  --gray-300: #363843;
  --gray-300-rgb: 54, 56, 67;
  --gray-400: #464852;
  --gray-400-rgb: 70, 72, 82;
  --gray-500: #636674;
  --gray-500-rgb: 99, 102, 116;
  --gray-600: #808290;
  --gray-600-rgb: 128, 130, 144;
  --gray-700: #9a9cae;
  --gray-700-rgb: 154, 156, 174;
  --gray-800: #b5b7c8;
  --gray-800-rgb: 181, 183, 200;
  --gray-900: #f5f5f5;
  --gray-900-rgb: 245, 245, 245;

  /* 侧边栏菜单覆盖 */
   .sidebar-container {
    .el-menu-item, .menu-title {
      color: var(--el-text-color-primary);
    }
    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
    & .theme-dark .el-sub-menu .el-menu-item {
      background-color: var(--el-bg-color) !important;
      &.is-active{
        background-color: var(--el-color-primary) !important;
      }
    }
  }

  /* 顶部栏栏菜单覆盖 */
  .el-menu--horizontal {
    .el-menu-item {
      &:not(.is-disabled) {
        &:hover,
        &:focus {
          background-color: var(--navbar-hover) !important;
        }
      }
    }
  }

  /* 表格样式覆盖 */
  .el-table {
    --el-table-header-bg-color: var(--el-bg-color-overlay) !important;
    --el-table-header-text-color: var(--el-text-color-regular) !important;
    --el-table-border-color: var(--el-border-color-light) !important;
    --el-table-row-hover-bg-color: var(--el-bg-color-overlay) !important;

    .el-table__header-wrapper, .el-table__fixed-header-wrapper {
      th {
        background-color: var(--el-bg-color-overlay, #f8f8f9) !important;
        color: var(--el-text-color-regular, #515a6e);
      }
    }
  }

  /* 树组件高亮样式覆盖 */
  .el-tree {
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: var(--el-bg-color-overlay) !important;
      color: var(--el-color-primary);
    }

    .el-tree-node__content:hover {
      background-color: var(--el-bg-color-overlay);
    }
  }

  /* 下拉菜单样式覆盖 */
  .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
    background-color: var(--navbar-hover) !important;
  }

  /* blockquote样式覆盖 */
  blockquote {
    background-color: var(--blockquote-bg) !important;
    border-left-color: var(--blockquote-border) !important;
    color: var(--blockquote-text) !important;
  }

  /* 时间表达式标题样式覆盖 */
  .popup-result .title {
    background: var(--cron-border);
  }

}

